<template>
  <view class="page-feedback">
    <view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
      <input class="custom-input round padding-lr" placeholder="输入内容" placeholder-class="text-999 text-sm" :adjust-position="false"
        :focus="false" maxlength="300" cursor-spacing="10" @focus="InputFocus" @blur="InputBlur"></input>
      <view class="flex align-center">
        <view class="img-box-option">
          <image src="/static/images/smile-01.png" mode="widthFix"></image>
        </view>
        <view class="img-box-option margin-left-sm">
          <image src="/static/images/add-01.png" mode="widthFix"></image>
        </view>
      </view>
      <!-- <button class="cu-btn bg-green shadow">发送</button> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        InputBottom: 0
      };
    },
    methods: {
      InputFocus(e) {
        this.InputBottom = e.detail.height
      },
      InputBlur(e) {
        this.InputBottom = 0
      }
    }
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  .page-feedback {
    .custom-input {
      background-color: $bgColor;
    }

    .img-box-option {
      width: 60rpx;
      height: 60rpx;
    }
  }
</style>
